<template>
  <div>
    <Header></Header>
    <div class="mblog">
      <h2>{{blog.title}}</h2>
      <el-link icon="el-icon-edit" v-if="ownBlog">
        <router-link :to="{name: 'BlogEdit', params: blog.id}">编辑</router-link>

      </el-link>
      <el-divider></el-divider>
      <!--使用markdown-body的class来渲染markdown-->
      <div class="markdown-body" v-html="blog.content">

      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
// 导入markdown的渲染样式
import "github-markdown-css/github-markdown.css"
export default {
  name: "BlogDetail",
  components: {
    Header
  },
  data() {
    return {
      blog: {
        id: '',
        title: '',
        content: '',
      },
      ownBlog: false
    }
  },
  methods: {

  },
  created() {
    const blogId = this.$route.params.blogId;
    // console.log(blogId)
    if (blogId) {
      this.$axios.get("/blog/" + blogId).then(res=>{
        const blog = res.data.data;
        this.blog.id = blog.id;
        this.blog.title = blog.title;

        var MarkdownIt = require("markdown-it")
        var md = new MarkdownIt();

        var result = md.render(blog.content);
        this.blog.content = result;

        this.ownBlog = (blog.userId === this.$store.getters.getUser.id);
      })
    }
  }
}
</script>

<style scoped>
  .mblog{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 48em;
    max-width: 90%;
    padding: 2em 1.5em;
    margin: 5px auto;
    text-align: center;
    background-color: #ffffff;
  }
</style>